<ScrollView sdkExampleTitle sdkToggleNavButton>
    <StackLayout (loaded)="onStackLoaded($event)" clasd="m-15">
        <!-- >> creating-image-html -->
        <!-- >> (hide) -->
        <Label text="Image loaded from resources" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load image from app/App_Resources/<platform> folders-->
        <Image src="res://logo_white_bg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
        <!-- >> (hide) -->
        <Label text="Image loaded from custom folder" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load image from app/images folder -->
        <Image src="~/images/logo.png" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
        <!-- >> (hide) -->
        <Label text="Image loaded from URL" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load image from url -->
        <Image src="https://docs.nativescript.org/img/cli-getting-started/angular/chapter0/NativeScript_logo.png"
            stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
        <!-- >> (hide) -->
        <Label text="Image src property binding" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load image from url -->
        <Image [src]="myImageSource" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
        <!-- << creating-image-html -->
        <!-- >> load-image-css -->
        <!-- >> (hide) -->
        <Label text="Image loaded from URL using CSS" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load backgroundImage from url using CSS-->
        <StackLayout class="layoutBackgroundImageURL"></StackLayout>
        <!-- >> (hide) -->
        <Label text="Image loaded from custom folder using CSS" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load backgroundImage from app/images folder using CSS-->
        <StackLayout class="layoutBackgroundImageFromFolder"></StackLayout>
        <!-- >> (hide) -->
        <Label text="Image loaded from resources using CSS" backgroundRepeat="no-repeat"
            textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- Load backgroundImage from App_Resources using CSS -->
        <StackLayout class="layoutBackgroundImageFromRes"></StackLayout>
        <!-- << load-image-css -->
        <!-- >> (hide) -->
        <Label text="Image from Base64 string" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- >> load-image-base-html -->
        <!-- Load Image from Base64 string generated ImageSource -->
        <Image [src]="base64ImageSource" width="100" height="100" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
        <!-- << load-image-base-html -->
        <!-- >> (hide) -->
        <Label text="Setting image stretching" textWrap="true" class="h3 p-l-15 p-r-15 p-t-15 text-left"></Label>
        <!-- << (hide) -->
        <!-- >> image-stretch -->
        <Image src="res://logo_white_bg" stretch="none" class="img-rounded p-l-15 p-r-15 p-t-15"></Image>
        <!-- << image-stretch -->
    </StackLayout>
</ScrollView>